<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>显示所有学生信息</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style type="text/css">
        .div-content{
            background-color: white;
            border-radius: 5px;
            padding: 14px;
        }
    </style>
</head>
<body>
<div class="div-content">
    <!--显示学生信息-->
    <table id="table-booklist" lay-filter="table-booklist-filter"></table>
</div>

<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js?v=2.0.0}" charset="utf-8"></script>
<script type="text/html" id="table-book-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>
<script th:inline="javascript">
    layui.use('table',function () {
        var table = layui.table;
        var $=layui.$;

        table.render({
            id:'table-booklist',
            title:'学生信息',
            elem: '#table-booklist'
            ,url: '/showStu' //数据接口
            ,page: true //开启分页
            ,toolbar:"#table-book-toolbar"
            ,limits:[6,8,10,20]
            ,cols:[
                [
                {type:"checkbox",width: 60, rowspan:2},
                {field:'id',title:'学号',width:170,align:'center'},
                {field:'name',title:'姓名',width:170,align:'center'},
                {field:'zhuanye',title:'专业',width:170,align:'center'},
                {field:'teacher',title:'授课教师',width:170,align:'center'},
                {field:'courseid',title:'课程代码',width:170,align:'center'},
                {field:'xueke',title:'学科类别',width:170,align:'center'},
                {field:'xiaoqu',title:'校区',width:170,align:'center',
                    templet:function (d) {
                        if(d.xiaoqu=='1') return '花津校区';
                        if(d.xiaoqu=='2') return '赭山校区';
                        if(d.xiaoqu=='3') return '天门山校区';
                    }
                }
            ]
            ],
            defaultToolbar:[
                "filter","print",{
                    title:"导出",
                    layEvent:"LAYTABLE_EXCEL",
                    icon:"layui-icon-table"
                }
            ]
        });

        //表格头部工具栏监听（导出和删除）
        table.on("toolbar(table-booklist-filter)",function (obj) {
            if(obj.event==="LAYTABLE_EXCEL"){  //导出为Excel表格
                $.ajax({
                    url: "/student/queryAll", //后端接口
                    dataType:'json',
                    success:function (res) {
                        table.exportFile('table-booklist',res.data,'xls');  //导出函数调用
                    }
                });
            }else if(obj.event==="delete"){  //删除所有学生信息
                // alert("hello");
                layer.confirm('您确认删除所有数据吗?', {icon: 3, title:'删除确认'}, function(index){
                    // 异步请求，删除数据
                    $.ajax({
                        url:"/student/delete",  //后端接口
                        success:function (response) {
                            if(response.code==200){
                                layer.msg(response.message,{
                                    icon: 1,
                                    time: 1000
                                },function () {
                                    window.location.reload();
                                });
                            }else {
                                layer.alert("删除失败！",{icon:2,anim:6});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>